  <style lang="less">
</style>
<template>
  <div>
    <div id="education" v-show="true">
       <Form inline :label-width="80">
            <FormItem :label="$t('当前位置')">
            </FormItem>
            <FormItem :label="$t('课程')" v-show="isEditing>1">
              <Input v-model="courseDataForm.name" readonly="true"></Input>
            </FormItem>
            <FormItem :label="$t('章节')" v-show="isEditing>3">
              <Input v-model="chapterDataForm.name" readonly="true"></Input>
            </FormItem>
            <FormItem :label="$t('知识点')" v-show="isEditing>5">
              <Input v-model="knowledgepointDataForm.name" readonly="true"></Input>
            </FormItem>
            <br/>
            <FormItem >
           <Button icon="ios-add" @click="btnCouList">课程管理</Button>
            </FormItem >
            <FormItem  v-show="isEditing>1">
           <Button icon="ios-add" @click="btnChaList">章节管理</Button>
            </FormItem>
            <FormItem v-show="isEditing>3">  
           <Button icon="ios-add" @click="btnKnoList">知识点管理</Button>
            </FormItem>
            <hr/>
            
      </Form>
       
    </div>
    <div id="courses" v-show="isEditing==1" >
      <Form :model="seachForm" inline :label-width="80" >
        <FormItem prop="name" :label="$t('name')">
          <Input v-model="seachForm.name" placeholder="请输入课程名"></Input>
        </FormItem>
        <FormItem>
          <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
        </FormItem>
      </Form>
      <ButtonGroup >
        <Button icon="ios-add" @click="btnAddClick">新增</Button>
        <Button icon="ios-create" @click="btnEditClick" :disabled="!courseCurrentRow">修改</Button>
        <Button icon="ios-trash" @click="btnDelClick" :disabled="!courseCurrentRow">删除</Button>
      </ButtonGroup>
       <Table  border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange"
              :columns="courseColumns" :data="courseDatas"></Table>
        <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" />
    </div>
    <div id="course" v-show="isEditing==2" >
        <Form  :model="courseDataForm" :label-width="80" :rules="validateRules">
          <FormItem prop="name" :label="$t('name')">
            <Input v-model="courseDataForm.name" placeholder="请输入名称" type="text"></Input>
          </FormItem>
          <FormItem prop="times" :label="$t('course_times')">
            <InputNumber  :min="0" v-model="courseDataForm.times" placeholder="请输入课时"></InputNumber>
          </FormItem>
          <FormItem prop="category" :label="$t('category')">
            <Cascader :data="categories" v-model="courseDataForm['cate_id']"></Cascader>
          </FormItem>
          <FormItem prop="date_range" :label="$t('date_range')">
            <DatePicker type="daterange" :value="[courseDataForm.start_time,courseDataForm.end_time]" @on-change="handleDateChange"  placement="请选择时间范围" placeholder="请选择时间范围"></DatePicker>
          </FormItem>
          <FormItem prop="status" :label="$t('status')">
            <i-select v-model="courseDataForm.status">
              <i-option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
            </i-select>
          </FormItem>
          <FormItem prop="grade" :label="$t('grade')">
            <Input v-model="courseDataForm.grade" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="outline" :label="$t('outline')">
            <Input v-model="courseDataForm.outline" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="preview" :label="$t('preview')">
            <Input v-model="courseDataForm.preview" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="overview" :label="$t('overview')">
            <Input v-model="courseDataForm.overview" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="reference" :label="$t('reference')">
            <Input v-model="courseDataForm.reference" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="aim" :label="$t('aim')">
            <Input v-model="courseDataForm.aim" type="textarea" :rows="4" placeholder="Enter something..."/>
          </FormItem>
          <FormItem prop="avatar" :label="$t('avatar')">
            <Upload
              ref="upload"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              multiple
              type="drag"
              action="http://71bbs.people.com.cn/postImageUpload.do"
              style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="btnSaveClick">保存</Button>
            <Button type="error" style="margin-left: 8px" @click="btnCancelClick">取消</Button>
          </FormItem>
        </Form>
    </div>
    <div id="chapters" v-show="isEditing==3">
     <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick2">新增</Button>
      <Button icon="ios-create" @click="btnEditClick2" :disabled="!chapterCurrentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick2" :disabled="!chapterCurrentRow">删除</Button>
      </ButtonGroup>
     <Table  border highlight-row ref="chapterCurrentRow" @on-current-change="tableCurrentChange2" 
     :columns="chapterColumns" :data="chapterDatas"></Table>
    </div>
    <div id="chapter" v-show="isEditing==4" >
     <Form   :model="chapterDataForm" inline :label-width="80" :rules="validateRules2">
      <FormItem prop="number" :label="$t('章节编号')">
        <InputNumber  :min="1"  style="width: 100px"  v-model="chapterDataForm.number" placeholder="Don't need to enter"></InputNumber>
      </FormItem>
      <FormItem prop="name" :label="$t('章节名')">
        <Input style="width: 150px" v-model="chapterDataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
       <br/>
       <FormItem prop="intro" :label="$t('章节简介')">
          <Input v-model="chapterDataForm.intro" clearable style="width: 600px" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="Enter something..."></Input>
      </FormItem>
       <br/>
      <FormItem>
        <Button type="primary" @click="btnSaveClick2">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick2">取消</Button>
      </FormItem>
     </Form>
    </div>
    <div id="knowledgepoints" v-show="isEditing==5">
     <ButtonGroup >
      <Button icon="ios-add" @click="btnAddClick3">新增</Button>
      <Button icon="ios-create" @click="btnEditClick3" :disabled="!knowledgepointCurrentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick3" :disabled="!knowledgepointCurrentRow">删除</Button>
      </ButtonGroup>
     <Table  border highlight-row ref="knowledgepointCurrentRow" @on-current-change="tableCurrentChange3" 
     :columns="knowledgepointColumns" :data="knowledgepointDatas"></Table>
    </div>
    <div id="knowledgepoint" v-show="isEditing==6">
      <Form   :model="knowledgepointDataForm" inline :label-width="80" :rules="validateRules3">
        <FormItem prop="number" :label="$t('知识点编号')">
        <InputNumber  :min="1" v-model="knowledgepointDataForm.number" readonly="true" placeholder="Enter something..."></InputNumber>
      </FormItem>
      <FormItem prop="name" :label="$t('知识点名')">
        <Input v-model="knowledgepointDataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
       <br/>
       <FormItem prop="intro" :label="$t('知识点内容')">
         <Input v-model="knowledgepointDataForm.intro" clearable style="width: 600px" type="textarea" :autosize="{minRows: 5,maxRows: 10}" placeholder="Enter something..."></Input>
        </FormItem>
         <br/>
      <FormItem>
        <Button type="primary" @click="btnSaveClick3">保存</Button>
        <Button style="margin-left: 8px" @click=" btnCancelClick3">取消</Button>
      </FormItem>
     </Form>
    </div>
  </div>
</template>
<script>
import {getCourseList, getCourse, addCourse, updateCourse, deleteCourse} from '@/api/course'
import {getChapterList,getChapter, addChapter, updateChapter, deleteChapter } from '@/api/chapters'
import { getKnowledgepointList, getKnowledgepoint, addKnowledgepoint, updateKnowledgepoint, deleteKnowledgepoint } from '@/api/knowledgepoints'
  export default {
    name: 'course',
    data() {
      return {
        //
              categories: [//分类
                {
                  value: '1',
                  label: '北京',

                },
                {
                  value: '2',
                  label: '江苏',

                }],
              statusModelstatusModel: true,
              validateRules: {
               times: [{type: "string", required: true, message: '格式不正确', pattern: /^\d*$/}],
                name: [{type: "string", required: true, message: '必填项'}],
                category: [{ required: true, message: '必填项'}],
                status: [{type: "string", required: true, message: '必填项'}],
                grade: [{type: "string", required: true, message: '必填项'}],
                outline: [{type: "string", required: true, message: '必填项'}],
                preview: [{type: "string", required: true, message: '必填项'}],
                overview: [{type: "string", required: true, message: '必填项'}],
                reference: [{type: "string", required: true, message: '必填项'}],
                aim: [{type: "string", required: true, message: '必填项'}],
              },
              validateRules2: {
                name: [{type: "string", required: true, message: '必填项'}],
                intro: [{type: "string", required: true, message: '必填项'}],
               
              },
               validateRules3: {
                name: [{type: "string", required: true, message: '必填项'}],
                intro: [{type: "string", required: true, message: '必填项'}],
               
              },
              statusList: [//状态栏
                {label: '正常', value: 1},
                {label: '禁用', value: 2},
                {label: '待审核', value: 3},
              ],
              timeRange:'',
        //
        //
               pageInfo: //分页
               {
                pageNumber: 1,
                pageSize: 10,
                totalRows: 0
              },
              chaPageInfo: 
               {
                pageNumber: 1,
                pageSize: 1000,
                totalRows: 0
              },
              knoPageInfo: 
               {
                pageNumber: 1,
                pageSize: 1000,
                totalRows: 0
              },
              isEditing:1,
              isNew:false,
               seachForm://搜索课程
                {
                name: '',
                address: ''
              },
            courseColumns: //
            [
                {
                  type: 'index',
                  width: 60,
                  align: 'center',
                },
                {
                  title: this.$t('name'),
                  key: 'name'
                },
                {
                  title: this.$t('avatar'),
                  key: 'avatar',
                  align: 'center',
                  render: (create, record) => {
                    const {avatar} = record.row;
                    return create('Avatar', {
                      props: {
                        shape: 'square',
                        size: 'large',
                        src: avatar
                      }
                    })
                  }
                },
                {
                  title: this.$t('course_times'),
                  key: 'times'
                },
                {
                  title: this.$t('people'),
                  key: 'people'
                },
                {
                  title: this.$t('category'),
                  key: 'cate_id'
                },
                {
                  title: this.$t('status'),
                  key: 'status',
                  align: 'center',
                  render: (create, record) => {
                    const status = record.row.status;
                    console.log(status);
                    const statusMap = {
                      'success': '正常',
                      'warning': '待审核',
                      'error': '禁用'
                    };
                    let clazz = 'success';
                    if (status === 2) { //禁用
                      clazz = 'error';
                    } else if (status === 3) { // 待审核
                      clazz = 'warning';
                    }
                    return create('Tag', {
                      props: {
                        type: clazz,
                      },
                      domProps: {
                        innerHTML: statusMap[clazz],
                      },
                    });
                  }
                },
                {
                  title: this.$t('start_time'),
                  key: 'start_time',
                  render(create,record) {
                    const time = record.row['start_time'];
                    return create('span',time.substr(0, 10));
                  }
                },
                {
                  title: this.$t('end_time'),
                  key: 'end_time',
                  render(create,record) {
                    const time = record.row['start_time'];
                    return create('span',time.substr(0, 10));
                  }
                },
                {
                  title: this.$t('grade'),
                  key: 'grade',
                  ellipsis: true
                },
                {
                  title: this.$t('overview'),
                  key: 'overview',
                  ellipsis: true
                },
                {
                  title: this.$t('preview'),
                  key: 'preview',
                  ellipsis: true
                },
                {
                  title: this.$t('reference'),
                  key: 'reference',
                  ellipsis: true
                },
                {
                  title: this.$t('aim'),
                  key: 'aim',
                  ellipsis: true
                },
            ],
            chapterColumns:
            [
                  {
                type: 'index',
                width: 60,
                align: 'center'
                  }, 
                {
                title: this.$t('章节号'),
                key: 'number',
                sortable: true,
                sortType:"asc",
              }, 
              {
                title: this.$t('章节名'),
                key: 'name'
              },
              {
              title: this.$t('章节介绍'),
                key: 'intro'
              }
            ],
            knowledgepointColumns: 
            [
              {    
                type: 'index',
                width: 60,
                align: 'center'
              }, 
               {
                title: this.$t('知识点编号'),
                key: 'number',
                sortable: true,
                sortType:"asc",
              }, 
              {
                title: this.$t('知识点名'),
                key: 'name'
              },
              {
              title: this.$t('知识点介绍'),
                key: 'intro'
              }
            ],
              courseDataForm: {status: 1},//                       当前选中
              chapterDataForm: {},//
              knowledgepointDataForm: {},//

              courseCurrentRow: null,                 //     当前行
              chapterCurrentRow:null,
              knowledgepointCurrentRow:null,

              courseDatas:[],//课程列表                   列表
              chapterDatas:[],//章节索引列表
              knowledgepointDatas:[],//知识点索引列
        //
      }
    },
    mounted()
     {
      this.queryList();
    },
    methods: {
      //搜索按键
          seacherSubmit: function () {
            this.pageInfo.pageNumber = 1;
            this.queryList();
          },
      //
      //加载页面 load
          couLoad: function()
          {
          this.isEditing = 1;
          this.queryCourseList();//更新课程
          this.courseCurrentRow= null;
          this.courseDataForm={id:fslse,name:fuck};
          this.chapterDataForm={};
          this.knowledgepointDataForm={};
          },
          chaLoad: function()
          {
          this.isEditing = 3;
          this.queryChapterList();//更新章节
          this.chapterDataForm = {courseId:this.courseDataForm.id};
          this.knowledgepointDataForm={};
          
          },
          knoLoad: function()
          {
          this.isEditing = 5;
          this.queryKnowledgepointList();//更新知识点
          this.knowledgepointDataForm = {courseId:this.courseDataForm.id ,chapterId:this.chapterDataForm.id};
          },
      //
      //定位按键 btnlist
         btnCouList : function () 
          {
            this.couLoad();
          },
        btnChaList : function () 
          {
            this.chaLoad();
          },
           btnKnoList : function () 
          {
            this.knoLoad();
          },
      //
      //列表  querylist
        queryList: function ()
        {  
            var queryParams = 
            {
              name: this.seachForm.name,
              pageNumber: this.pageInfo.pageNumber,
              pageSize: this.pageInfo.pageSize
            };
         getCourseList(queryParams).then(res => 
            {
              this.courseDatas = res.data.rows;
              this.pageInfo.totalRows = parseInt(res.data.total);
            });
        },
        queryChapterList: function() 
        {
          var queryParams = 
          {
            courseId:this.courseDataForm.id,
            pageNumber: this.chaPageInfo.pageNumber,
            pageSize: this.chaPageInfo.pageSize
          };
          getChapterList(queryParams).then(res => 
          {
            this.chapterDatas = res.data.rows;
            this.pageInfo.totalRows = parseInt(res.data.total);
          });
        },
        queryKnowledgepointList: function() 
        {                                  
          var queryParams = 
          {
            chapterId:this.chapterDataForm.id,
             pageNumber: this.knoPageInfo.pageNumber,
            pageSize: this.knoPageInfo.pageSize
            
          };
          getKnowledgepointList(queryParams).then(res => {
            this.knowledgepointDatas = res.data.rows;
            this.pageInfo.totalRows = parseInt(res.data.total);
          });
        },
      //
      //换页  pagenumberchange
        pageNumberChange: function (pagenum) 
        {
          this.pageInfo.pageNumber = pagenum;
          this.queryList();
        },
        pageNumberChange2: function (pagenum)
        {
          this.chaPageInfo.pageNumber = pagenum;
          this.queryChapterList();
        },
        pageNumberChange3: function (pagenum) 
        {
          this.knoPageInfo.pageNumber = pagenum;
          this.queryKnowledgepointList();
        },
      //
      //换行 tableCurrentChange
        tableCurrentChange: function (currentRow, oldCurrentRow) //换行
        {
          this.courseCurrentRow = currentRow;
        },
        tableCurrentChange2: function(currentRow, oldCurrentRow) 
        {
            this.chapterCurrentRow = currentRow;
        },
        tableCurrentChange3: function(currentRow, oldCurrentRow) 
        {
          this.knowledgepointCurrentRow = currentRow;
        },
      //
      //添加按钮add
       btnAddClick: function () {//添加
            this.courseDataForm = {status: 1, avatar: 'https://i.loli.net/2017/08/21/599a521472424.jpg'};
            this.isEditing = 2;
          },
        btnAddClick2: function() 
        {
          this.chapterDataForm = {courseId:this.courseDataForm.id};
            this.isEditing = 4;
        },
        btnAddClick3: function() 
        {
          this.knowledgepointDataForm = {courseId:this.courseDataForm.id ,chapterId:this.chapterDataForm.id};
          this.isEditing = 6;
        },
      //
      //修改按钮edit
          btnEditClick: function ()
           {
            this.courseDataForm = this.courseCurrentRow;
            this.isEditing = 2;
          },
           btnEditClick2: function() 
          {
            this.chapterDataForm = this.chapterCurrentRow;
             this.isEditing = 4;
          },
           btnEditClick3: function() 
          {
            this.knowledgepointDataForm = this.knowledgepointCurrentRow;
           this.isEditing = 6;
          },
      //
      //删除按钮del
       btnDelClick: function () 
       {
            this.$Modal.confirm({
              title: '删除',
              content: '确定要删除选中的信息吗?',
              onOk: () => {
                this.delData();
              }
            });
             this.couLoad();
          },
           btnDelClick2: function() 
          {
            this.$Modal.confirm({
              title: '删除',
              content: '确定要删除选中的信息吗?',
              onOk: () => {
                this.delData2();
              }
            });
            this.chaLoad();
          },
          btnDelClick3: function() 
          {
            this.$Modal.confirm({
              title: '删除',
              content: '确定要删除选中的信息吗?',
              onOk: () => {
                this.delData3();
              }
            });
            this.knoLoad();
          },
      //
      //删除事件
        delData: function () 
          {
            deleteCourse(this.courseCurrentRow.id).then(res => {
              console.log(res);
              if (res.data && res.data.affectedRows > 0) {
                this.$Message.success('删除成功!');
                this.queryList();
              } else {
                this.$Message.error('删除失败!');
              }
            });
          },
          delData2: function() 
          {
            deleteChapter(this.chapterCurrentRow.id).then(res => {
              if (res.data&& res.data.affectedRows > 0) {
                this.$Message.success('删除成功!');
                this.queryChapterList();
              } else {
                this.$Message.error('删除失败!');
              }
            });
          },
           delData3: function() 
           {
            deleteKnowledgepoint(this.knowledgepointCurrentRow.id).then(res => {
              if (res.data&& res.data.affectedRows > 0) {
                this.$Message.success('删除成功!');
                this.queryKnowledgepointList();
              } else {
                this.$Message.error('删除失败!');
              }
            });
          },
      //
      //保存按键saveclick
        btnSaveClick: function () 
        {
              if (this.courseDataForm.id) {
                updateCourse(this.courseDataForm.id, this.courseDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              } else {
                addCourse(this.courseDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.queryList();
                    this.isEditing = 1;
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              }
        },
        btnSaveClick2: function() 
        {
              if (this.chapterDataForm.id) 
              {
                updateChapter(this.chapterDataForm).then
                (res => 
                {    //去掉id
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                    this.chaLoad();
                    this.isNew=false;
                  } else {
                    this.$Message.error(res.error);
                  }
                }
                );
              } 
              else 
              {
                addChapter(this.chapterDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) {
                    this.$Message.success('保存成功!');
                  this.chaLoad();
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              }
        },
        btnSaveClick3: function()
        {
              if (this.knowledgepointDataForm.id) {
                updateKnowledgepoint(this.knowledgepointDataForm).then(res => 
                {    //去掉id
                  if (res.data && res.data.affectedRows > 0) 
                  {
                    this.$Message.success('保存成功!');
                    this.load3();
                  } else 
                  {
                    this.$Message.error(res.error);
                  }
                });
              } else {
                addKnowledgepoint(this.knowledgepointDataForm).then(res => {
                  if (res.data && res.data.affectedRows > 0) 
                  {
                    this.$Message.success('保存成功!');
                    this.load3();
                  } else {
                    this.$Message.error(res.error);
                  }
                });
              }
        },
      //
      //取消按键cancel
       btnCancelClick: function () {
            this.isEditing = 1;
          },
           btnCancelClick2: function() {
           this.isEditing = 3;
          },
            btnCancelClick3: function() {
           this.isEditing = 5;
          },
      //
      //时间控件
          handleDateChange(val) {
            this.courseDataForm.start_time = val[0];
            this.courseDataForm.end_time = val[1];
          },
      //
    },
  }

</script>
